<template>
	<view class="content">
		
		<view class="list">
			<!-- 登录账号 -->
			<view class="list-call">
				<image class="img" src=""></image>
				<input class="biaoti" v-model="account.loginName" type="text" maxlength="32" placeholder="输入手机号或者商户号" />
			</view>
			<!-- 登陆密码 -->
			<view class="list-call">
				<image class="img" src=""></image>
				<input class="biaoti" v-model="account.password" type="text" maxlength="32" placeholder="输入登录密码" password="true" />
			</view>
			<!-- 门诊选择 -->
			<view class="list-call">
				<image class="img" src=""></image>
				<picker class="biaoti" :value="outpatientIndex" :range="outpatientList" :range-key="'simplename'" @change="bindPickerChange($event)">
					<view>{{outpatientList[outpatientIndex].simplename}}</view>
				</picker>
			</view>
			<!-- 登录按钮 -->
			<view class="dlbutton" hover-class="dlbutton-hover" @tap="bindLogin()">
				<text>登录</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	var _this;
	import {mapMutations} from 'vuex';
	export default {
		data() {
			return {
				account: {
					loginName: '', //登录账号，商户号或者手机号
					password: '', //密码
				},
				outpatientIndex:0,  
				outpatientList: [{simplename:'请选择',abbreviation:''}] ,// 存放门诊数组
				outpatientShrink:'',	// 门店缩写
				outpatientSimple:''		// 门店汉字简写
			}
		},
		onLoad() {
			_this = this;
		},
		onReady(){
			// 获取门诊数据
			this.$api.deptList().then((res)=>{
				// 处理后台返回的数据
				for (let index in res.data) {
					let outpatient = {
						simplename:res.data[index].simplename,
						abbreviation:res.data[index].abbreviation
					}
					this.outpatientList.push(outpatient)
				}
			}).catch((e) => {});
		},
		methods: {
			...mapMutations(['login']),
			async bindLogin() {
				if(this.account.loginName==""){
					uni.showToast({
						icon: 'none',
						title: '请输入账号'
					});
					return;
				};
				if(this.account.password==""){
					uni.showToast({
						icon: 'none',
						title: '请输入密码'
					});
					return;
				};
				if(this.abbreviation==""){
					uni.showToast({
						icon: 'none',
						title: '门诊不能为空'
					});
					return;
				};
				this.$api.login(this.account).then((res)=>{
					console.log(res);
					if(res.data.code == 1){
						uni.showToast({
							icon: 'none',
							title: '密码错误'
						});
						return;
					}
					let userData = res.data
					userData.outpatientShrink = this.outpatientShrink;
					userData.outpatientSimple = this.outpatientSimple;
					_this.login(userData)
				
					uni.showToast({
						icon: 'none',
						title: '登陆成功'
					});
				
					uni.switchTab({
						url: '../tabBar/index/index'
					})
					
				}).catch((err)=>{});
			},
			bindPickerChange(event){
				this.outpatientIndex = event.target.value;
				this.outpatientShrink = this.outpatientList[event.target.value].abbreviation;
				this.outpatientSimple = this.outpatientList[event.target.value].simplename;
			}
		}
	}
</script>

<style lang='scss' scoped>
page {
		background-color: #FFFFFF;
	}
	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.header {
		width: 60%;
		height: 181rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.header image {
		width: 100%;
		height: 100%;

	}

	.list {
		display: flex;
		flex-direction: column;
		padding-top: 80upx;
		padding-left: 70upx;
		padding-right: 70upx;
	}

	.list-call {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		color: #333333;
		border-bottom: 1upx solid rgba(230, 230, 230, 1);
	}

	.list-call .img {
		width: 21px;
		height: 21px;
	}

	.list-call .biaoti {
		flex: 1;
		text-align: left;
		font-size: 32upx;
		line-height: 100upx;
		margin-left: 16upx;
	}

	.dlbutton {
		color: #FFFFFF;
		font-size: 34upx;
		width: 100%;
		height: 100upx;
		background: linear-gradient(left, rgba(254, 154, 105, 1), rgba(251, 119, 94, 1));
		box-shadow: 0upx 8upx 13upx 3upx rgba(251, 119, 94, 0.5);
		line-height: 100upx;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
		margin-top: 60upx;
	}

	.dlbutton-hover {
		background: linear-gradient(left, rgba(254, 154, 105, 1), rgba(251, 119, 94, 1));
	}

	.input-down-des {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 26upx;
		margin-top: 30upx;
		color: #BABABA;
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}

	.shenqing {
		color: #FD9467;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 32upx;
		margin-top: 50upx;
		text-align: center;
		height: 40upx;
		line-height: 40upx;
		font-weight: bold;
	}

	.xieyi {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 30upx;
		margin-top: 80upx;
		color: #848484;
		text-align: center;
		height: 40upx;
		line-height: 40upx;
	}

	.xieyi image {
		width: 30upx;
		height: 30upx;
	}
	.admin-st{
		text-align: right;
		margin-top: 20upx;
		color: #BABABA;
		font-size:28upx;
		height: 40upx;
		line-height: 40upx;	
		vertical-align: middle;
	}
</style>
